<!--  -->
<template>
  <div style="width: 100%; height: 400px"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "pieChart",
  props: {
    saledata: Array,
  },
  data() {
    return {
      
    };
  },
  watch: {   
    saledata: {
      deep: true,
      handler(val) {
        this.setOption(val)
      }
    }
  },
  components: {},
  computed: {
  },
  created() {},
  beforeMount() {
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    setOption(saledata){
      this.chart.setOption({
        title:{
          text:'商品销售统计',
          show:true,
          top:"top",
          left:'center'
        },
        legend: {
          top: "bottom",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: false, readOnly: false },
            restore: { show: false },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            // radius: [10, 150],
            center: ["50%", "50%"],
            // roseType: "radius",
            label: {
              formatter: "{b}({d}%)",
            },
            itemStyle: {
              borderRadius: 0,
            },
            data: saledata,
          },
        ],
      });
    },
    initChart() {
      this.chart = echarts.init(this.$el);
      this.setOption(this.saledata)
    },
  },
};
</script>

<style lang='' scoped>
</style>